<template>
  <commonCard title="今日交易用户数" :value="numberFormat(useReport.reportInfo.orderUser)">
  
  
  
  <template #default>
    <div ref="barRef" style="width:100%;height:100%">
      
    </div>

  </template>
  <template #footer>
  <span>退货率</span>
  <span class="emphasis">{{useReport.reportInfo.returnRate}}%</span>
      </template>
  
  
  </commonCard>
</template>

<script lang="ts" >
  export default {
    name:'TodayUsers'
  }
</script>
<script lang="ts" setup>

import commonCard from './commonCard.vue';
import { ref, onMounted,watch } from 'vue';
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';
import { useReportDataStore } from "@/stores/reportData"
import useFormat from "@/hooks/useFrmat"
const { numberFormat, moneyFormat } = useFormat()
const useReport = useReportDataStore()

const barRef = ref();
let barChart: EChartsType;
const getOption = () => {
  return {
    xAxis: {
      show: false,
      data: useReport.reportInfo.orderUserTrendAxis

    },
    yAxis: {
      show:false,
    },
    series: {
      type: 'bar',
      data:useReport.reportInfo.orderUserTrend
    },
    grid: {
      // top:0,
      // bottom:10,
      left: 0,
      right: 0
    }
  }
}
onMounted(() => {
  barChart = echarts.init(barRef.value);
 
})

watch(() => {
  return useReport.reportInfo.orderUser
}, () => {
  barChart.setOption(getOption())
})
</script>

<style lang="scss" scoped>

</style>